<template>
  <!-- 系统管理-工作流-流程管理 -->
  <base-breadcrumb :title="$route.meta.title">
    <!-- 搜索 -->
    <searchData :searchData="searchArr" @search="search"></searchData>
    <!-- 表格 -->
    <a-card :bordered="false">
<!--      <title-name :title="$route.meta.title"></title-name>-->
      <!-- 表格 -->
      <list-table
        ref="table"
        tableLayout="fixed"
        size="default"
        rowKey="id"
        :columns="columns"
        :request="loadData"
        :isScrollX="false"
        :page-keys="['pageNo', 'pageSize', 'total']"
        :alert="true"
        show-size-changer
        show-quick-jumper
        showPagination="auto"
      >
        <template slot="createTime" slot-scope="text, record">
           <span>{{moment(record.createTime).format('yyyy-MM-DD')}}</span>
        </template>
        <template slot="lastUpdateTime" slot-scope="text, record">
           <span>{{moment(record.lastUpdateTime).format('yyyy-MM-DD')}}</span>
        </template>
        <template slot="action" slot-scope="text, record">
          <a @click="handleManage(record)" v-btnPermission="'sy_013_loo_01'">查看</a>
          <a-divider type="vertical" v-btnPermission="'sy_013_edi_02'" />
          <a @click="configuration(record)" v-btnPermission="'sy_013_edi_02'">配置</a>
        </template>
      </list-table>
    </a-card>
    <configuration :configurationVisible="visible" @handleCancel="handleCancel" :modelKey="modelKey"></configuration>
    <a-modal title="弹窗" width="1200px" :visible="toViewVisivle" @cancel="viewCancel">
      <a-spin :spinning="loadingImg">
        <img style="width: 100%" :src="flowChart" />
      </a-spin>

      <template slot="footer">
        <a-button @click="viewCancel">关闭</a-button>
      </template>
    </a-modal>
  </base-breadcrumb>
</template>

<script>
import { processListByPage, processCategory, generateImage} from '@/api/system/process' // api
import Configuration from './configuration'
import BasePage from '@/views/basePage' // 基础配置
import moment from 'moment'
const columns = [
  {
    title: '序号',
    width: 80,
    dataIndex: 'index',
    customRender() {
      return arguments[2] + 1
    }
  },
  { title: '模型名称', dataIndex: 'name' },
  { title: '模型标识', dataIndex: 'key' },
  { title: '分类', dataIndex: 'category' },
  { title: '创建时间', dataIndex: 'createTime',scopedSlots: { customRender: 'createTime' } },
  { title: '更新时间', dataIndex: 'lastUpdateTime',scopedSlots: { customRender: 'lastUpdateTime' } },
  { title: '版本', dataIndex: 'version' },
  { title: '操作', dataIndex: 'action', align: 'center', scopedSlots: { customRender: 'action' } }
]
const searchArr = [
  {
    name: '模型名称',
    value: 'search',
    type: 'input'
  },
  {
    name: '模型标识',
    value: 'processKey',
    type: 'input'
  },
  {
    name: '分类',
    type: 'select',
    value: 'category',
    data: []
  },
]
export default {
  name: 'a' + Date.now(),
  extends: new BasePage(),
  components: {
    Configuration
  },
  data() {
    this.columns = columns
    return {
      searchArr,
      flowChart: '',
      modelKey:'', //key用于配置传参
      loadingImg: false, //查看图片
      queryParam: {}, // 查询参数
      visible: false,
      loadData: async (params) => {
        let args = Object.assign(params, this.queryParam)
        return processListByPage(args).then((res) => {
          if (res.code === 200) {
            return { code: 200, data: res.data.data, total: res.data?.totalElements }
          }
        })
      },
      toViewVisivle: false //查看弹窗
    }
  },
  methods: {
    // 查看
    handleManage(record) {
      this.toViewVisivle = true
      this.loadingImg = true
      generateImage(record.deploymentId).then((res) => {
        if (res.code == 200) {
          this.flowChart = 'data:image/png;base64,' + res.data
        }
        this.loadingImg = false
      })
    },
    // 搜索
    search(value) {
      value && (this.queryParam = value)
      this.$refs.table.refresh(true)
    },
    configuration(str) {
      this.visible = true;
      this.modelKey = str.key;
    },
    handleCancel(data) {
      this.visible = data
    },
    //获取分类字段
    getmodelerCategory() {
      let dataArr = []
      processCategory().then((res) => {
        if (res.code == 200) {
          let data = res.data || []
          data.length && data.map((item) => dataArr.push({ label: item, value: item }))
          searchArr[2].data = dataArr
        }
      })
    },
    //关闭查看弹窗
    viewCancel() {
      this.toViewVisivle = false
    }
  },

  created() {
    this.getmodelerCategory()
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.pint {
  @{deep} .button_right {
    display: inline-block !important;
  }
}
</style>
